<template>
  <div class="home-container">
    <!-- 添加加载状态 -->
    <div v-if="loading" class="home-loading">
      <el-icon class="loading-icon"><LoadingIcon /></el-icon>
      <span>首页加载中...</span>
    </div>
    
    <template v-else>
      <el-card class="welcome-card">
        <h2>欢迎使用MES系统</h2>
        <p>当前时间: {{ new Date().toLocaleString() }}</p>
        <p>系统状态: 运行正常</p>
      </el-card>
      
      <el-row class="quick-actions" :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover">
            <h3>生产监控</h3>
            <p>查看实时生产数据</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <h3>质量管理</h3>
            <p>产品质量分析</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <h3>设备管理</h3>
            <p>设备状态监控</p>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <h3>报表中心</h3>
            <p>生成各类报表</p>
          </el-card>
        </el-col>
      </el-row>
      
      <el-card class="recent-activity">
        <h3>最近活动</h3>
        <el-timeline>
          <el-timeline-item timestamp="今天 09:00" placement="top">
            <p>系统维护完成</p>
          </el-timeline-item>
          <el-timeline-item timestamp="昨天 16:30" placement="top">
            <p>新增5条生产订单</p>
          </el-timeline-item>
          <el-timeline-item timestamp="昨天 10:15" placement="top">
            <p>设备例行检查完成</p>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </template>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { Loading as LoadingIcon } from '@element-plus/icons-vue'

export default {
  name: 'Home',
  components: {
    Loading: LoadingIcon
  },
  setup() {
    const loading = ref(true)
    
    onMounted(() => {
      // 模拟数据加载
      setTimeout(() => {
        loading.value = false
      }, 500)
    })
    
    return {
      loading
    }
  }
}
</script>

<style>
.home-container {
  padding: 20px;
}

.welcome-card {
  margin-bottom: 20px;
}

.quick-actions {
  margin-bottom: 20px;
}

.recent-activity {
  margin-bottom: 20px;
}

.home-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80vh;
  flex-direction: column;
}

.loading-icon {
  font-size: 40px;
  margin-bottom: 20px;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>